<template>
  <div class="faculty-detail-container">
    <main class="content-wrapper">
      <!-- 返回按钮 -->
      <div class="back-section">
        <router-link to="/faculty" class="back-link">
          <span class="back-icon">←</span>
          <span>返回师资力量列表</span>
        </router-link>
      </div>
      
      <!-- 教师基本信息区域 -->
      <section class="faculty-basic-info">
        <div class="faculty-header">
          <img :src="facultyDetail.photo" alt="教师照片" class="faculty-photo-large">
          <div class="faculty-main-info">
            <h1 class="faculty-name">{{ facultyDetail.name }}</h1>
            <p class="faculty-title">{{ facultyDetail.title }}</p>
            <div class="faculty-contact">
              <div class="contact-item">
                <span class="contact-label">电子邮箱：</span>
                <span class="contact-value">{{ facultyDetail.email }}</span>
              </div>
              <div class="contact-item">
                <span class="contact-label">办公电话：</span>
                <span class="contact-value">{{ facultyDetail.phone }}</span>
              </div>
              <div class="contact-item">
                <span class="contact-label">所属学院：</span>
                <span class="contact-value">{{ facultyDetail.college }}</span>
              </div>
              <div class="contact-item">
                <span class="contact-label">研究方向：</span>
                <span class="contact-value">{{ facultyDetail.researchArea }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 详细内容区域 -->
      <section class="faculty-details">
        <!-- 教育背景 -->
        <div class="detail-section">
          <h2 class="section-title">教育背景</h2>
          <div class="section-content">
            <ul class="timeline-list">
              <li v-for="(edu, index) in facultyDetail.education" :key="index" class="timeline-item">
                <div class="timeline-year">{{ edu.year }}</div>
                <div class="timeline-content">
                  <p class="timeline-degree">{{ edu.degree }}</p>
                  <p class="timeline-school">{{ edu.school }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 工作经历 -->
        <div class="detail-section">
          <h2 class="section-title">工作经历</h2>
          <div class="section-content">
            <ul class="timeline-list">
              <li v-for="(exp, index) in facultyDetail.experience" :key="index" class="timeline-item">
                <div class="timeline-year">{{ exp.year }}</div>
                <div class="timeline-content">
                  <p class="timeline-position">{{ exp.position }}</p>
                  <p class="timeline-organization">{{ exp.organization }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 研究方向 -->
        <div class="detail-section">
          <h2 class="section-title">研究方向</h2>
          <div class="section-content">
            <ul class="research-areas">
              <li v-for="(area, index) in facultyDetail.researchDetails" :key="index" class="research-area-item">
                {{ area }}
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 学术成果 -->
        <div class="detail-section">
          <h2 class="section-title">学术成果</h2>
          <div class="section-content">
            <div class="achievements-tabs">
              <button 
                v-for="tab in achievementTabs" 
                :key="tab.key" 
                :class="['tab-button', { active: activeTab === tab.key }]"
                @click="activeTab = tab.key"
              >
                {{ tab.label }}
              </button>
            </div>
            
            <div class="tab-content" v-if="activeTab === 'papers'">
              <ul class="papers-list">
                <li v-for="(paper, index) in facultyDetail.papers" :key="index" class="paper-item">
                  <p class="paper-title">{{ paper.title }}</p>
                  <p class="paper-info">{{ paper.authors }}. {{ paper.journal }}, {{ paper.year }}.</p>
                </li>
              </ul>
            </div>
            
            <div class="tab-content" v-else-if="activeTab === 'projects'">
              <ul class="projects-list">
                <li v-for="(project, index) in facultyDetail.projects" :key="index" class="project-item">
                  <p class="project-title">{{ project.title }}</p>
                  <p class="project-info">{{ project.fundingAgency }}, {{ project.year }}, 经费: {{ project.funding }}</p>
                </li>
              </ul>
            </div>
            
            <div class="tab-content" v-else-if="activeTab === 'awards'">
              <ul class="awards-list">
                <li v-for="(award, index) in facultyDetail.awards" :key="index" class="award-item">
                  <p class="award-title">{{ award.title }}</p>
                  <p class="award-info">{{ award.issuer }}, {{ award.year }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 教授课程 -->
        <div class="detail-section">
          <h2 class="section-title">教授课程</h2>
          <div class="section-content">
            <ul class="courses-list">
              <li v-for="(course, index) in facultyDetail.courses" :key="index" class="course-item">
                <div class="course-info">
                  <h4 class="course-name">{{ course.name }}</h4>
                  <p class="course-details">{{ course.type }} | {{ course.credits }}学分 | {{ course.semester }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const activeTab = ref('papers');

// 学术成果标签
const achievementTabs = [
  { key: 'papers', label: '发表论文' },
  { key: 'projects', label: '科研项目' },
  { key: 'awards', label: '获奖情况' }
];

// 模拟教师详细数据
const facultyDetail = ref({
  name: '未知教师',
  title: '未知职称',
  photo: '/path/to/default-photo.jpg',
  email: 'contact@example.com',
  phone: '010-12345678',
  college: '未知学院',
  researchArea: '未知研究方向',
  education: [],
  experience: [],
  researchDetails: [],
  papers: [],
  projects: [],
  awards: [],
  courses: []
});

// 教师数据映射
const facultyDataMap = {
  '张三': {
    name: '张三',
    title: '中国科学院院士',
    photo: '/path/to/photo1.jpg',
    email: 'zhangsan@shanhedaxue.edu.cn',
    phone: '010-87654321',
    college: '物理学院',
    researchArea: '凝聚态物理、量子计算',
    education: [
      { year: '1985-1989', degree: '理学学士', school: '北京大学物理系' },
      { year: '1989-1994', degree: '理学博士', school: '中国科学院物理研究所' },
      { year: '1994-1996', degree: '博士后', school: '美国麻省理工学院' }
    ],
    experience: [
      { year: '1996-2001', position: '助理教授', organization: '美国斯坦福大学物理系' },
      { year: '2001-2008', position: '教授', organization: '清华大学物理系' },
      { year: '2008-至今', position: '教授、博士生导师', organization: '山河大学物理学院' },
      { year: '2015-至今', position: '中国科学院院士', organization: '中国科学院' }
    ],
    researchDetails: [
      '凝聚态物理理论与计算',
      '量子信息与量子计算',
      '低维材料物理性质',
      '拓扑量子现象'
    ],
    papers: [
      {
        title: 'Quantum Computation with Topological Insulators',
        authors: 'Zhang S, et al.',
        journal: 'Science',
        year: '2018'
      },
      {
        title: 'Novel Electronic States in Two-dimensional Materials',
        authors: 'Zhang S, et al.',
        journal: 'Nature Physics',
        year: '2016'
      },
      {
        title: '凝聚态系统中的量子纠缠与量子相变',
        authors: '张三，李四',
        journal: '中国科学',
        year: '2020'
      }
    ],
    projects: [
      {
        title: '量子计算与量子信息处理',
        fundingAgency: '国家重点研发计划',
        year: '2019-2024',
        funding: '2000万元'
      },
      {
        title: '拓扑量子材料的设计与调控',
        fundingAgency: '国家自然科学基金重大项目',
        year: '2017-2022',
        funding: '1500万元'
      }
    ],
    awards: [
      {
        title: '国家自然科学奖一等奖',
        issuer: '中华人民共和国国务院',
        year: '2019'
      },
      {
        title: '何梁何利基金科学与技术进步奖',
        issuer: '何梁何利基金',
        year: '2017'
      }
    ],
    courses: [
      {
        name: '量子力学导论',
        type: '本科生课程',
        credits: 4,
        semester: '秋季学期'
      },
      {
        name: '凝聚态物理前沿',
        type: '研究生课程',
        credits: 3,
        semester: '春季学期'
      }
    ]
  },
  '李四': {
    name: '李四',
    title: '长江学者特聘教授',
    photo: '/path/to/photo2.jpg',
    email: 'lisi@shanhedaxue.edu.cn',
    phone: '010-87654322',
    college: '计算机科学与技术学院',
    researchArea: '人工智能、机器学习、计算机视觉',
    education: [
      { year: '1990-1994', degree: '工学学士', school: '清华大学计算机科学与技术系' },
      { year: '1994-1997', degree: '工学硕士', school: '清华大学计算机科学与技术系' },
      { year: '1997-2001', degree: '工学博士', school: '美国卡内基梅隆大学计算机学院' }
    ],
    experience: [
      { year: '2001-2006', position: '研究员', organization: '微软亚洲研究院' },
      { year: '2006-2010', position: '副教授', organization: '浙江大学计算机科学与技术学院' },
      { year: '2010-至今', position: '教授、博士生导师', organization: '山河大学计算机科学与技术学院' },
      { year: '2013-至今', position: '长江学者特聘教授', organization: '教育部' }
    ],
    researchDetails: [
      '深度学习理论与应用',
      '计算机视觉与模式识别',
      '自然语言处理',
      '多模态智能计算'
    ],
    papers: [
      {
        title: 'Deep Learning for Computer Vision: A Comprehensive Review',
        authors: 'Li S, et al.',
        journal: 'IEEE Transactions on Pattern Analysis and Machine Intelligence',
        year: '2019'
      },
      {
        title: 'Multi-modal Fusion in AI Systems',
        authors: 'Li S, et al.',
        journal: 'Nature Machine Intelligence',
        year: '2021'
      }
    ],
    projects: [
      {
        title: '新一代人工智能基础理论与关键技术',
        fundingAgency: '国家重点研发计划',
        year: '2020-2025',
        funding: '1800万元'
      }
    ],
    awards: [
      {
        title: '国家科技进步奖二等奖',
        issuer: '中华人民共和国国务院',
        year: '2020'
      }
    ],
    courses: [
      {
        name: '人工智能导论',
        type: '本科生课程',
        credits: 3,
        semester: '春季学期'
      },
      {
        name: '机器学习',
        type: '研究生课程',
        credits: 4,
        semester: '秋季学期'
      }
    ]
  }
  // 可以根据需要添加更多教师的数据
};

// 组件挂载时获取教师信息
onMounted(() => {
  const teacherName = route.query.name || '未知教师';
  // 如果教师名称在数据映射中存在，则使用对应的数据，否则使用默认数据
  if (facultyDataMap[teacherName]) {
    facultyDetail.value = facultyDataMap[teacherName];
  } else {
    // 使用路由参数中的教师名称
    facultyDetail.value.name = teacherName;
    facultyDetail.value.title = route.query.title || '未知职称';
  }
});
</script>

<style scoped>
/* 主容器样式 */
.faculty-detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  width: 100%;
}

/* 返回链接样式 */
.back-section {
  margin-bottom: 30px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: #3498db;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: #2980b9;
}

.back-icon {
  margin-right: 8px;
  font-size: 18px;
}

/* 教师基本信息样式 */
.faculty-basic-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.faculty-header {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.faculty-photo-large {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #ecf0f1;
}

.faculty-main-info {
  flex: 1;
}

.faculty-name {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 10px;
  font-weight: 700;
}

.faculty-title {
  font-size: 20px;
  color: #3498db;
  margin-bottom: 20px;
  font-weight: 600;
}

.faculty-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  min-width: 300px;
}

.contact-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-right: 10px;
  min-width: 80px;
}

.contact-value {
  font-size: 14px;
  color: #2c3e50;
}

/* 详细内容样式 */
.faculty-details {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.detail-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
  font-weight: 600;
}

.section-content {
  font-size: 16px;
  color: #5d6d7e;
  line-height: 1.8;
}

/* 时间线样式 */
.timeline-list {
  position: relative;
  padding-left: 30px;
}

.timeline-list::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ecf0f1;
}

.timeline-item {
  position: relative;
  margin-bottom: 25px;
  padding-bottom: 25px;
}

.timeline-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #3498db;
  border: 3px solid #e3f2fd;
}

.timeline-year {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.timeline-degree,
.timeline-position {
  font-size: 16px;
  color: #34495e;
  font-weight: 500;
  margin-bottom: 4px;
}

.timeline-school,
.timeline-organization {
  font-size: 14px;
  color: #7f8c8d;
}

/* 研究方向样式 */
.research-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.research-area-item {
  background-color: #e3f2fd;
  color: #2980b9;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* 学术成果标签样式 */
.achievements-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 2px solid #ecf0f1;
}

.tab-button {
  background: none;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  color: #7f8c8d;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: #3498db;
}

.tab-button.active {
  color: #3498db;
  font-weight: 600;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3498db;
}

/* 学术成果内容样式 */
.tab-content {
  padding: 10px 0;
}

.papers-list,
.projects-list,
.awards-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.paper-item,
.project-item,
.award-item {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.paper-item:hover,
.project-item:hover,
.award-item:hover {
  background-color: #e9ecef;
}

.paper-title,
.project-title,
.award-title {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 8px;
  font-weight: 500;
}

.paper-info,
.project-info,
.award-info {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.6;
}

/* 课程列表样式 */
.courses-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.course-item {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.course-item:hover {
  background-color: #e9ecef;
  transform: translateX(5px);
}

.course-name {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 5px;
  font-weight: 500;
}

.course-details {
  font-size: 14px;
  color: #7f8c8d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 20px 15px;
  }
  
  .faculty-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  
  .faculty-photo-large {
    width: 150px;
    height: 150px;
  }
  
  .faculty-name {
    font-size: 28px;
  }
  
  .faculty-contact {
    flex-direction: column;
    gap: 10px;
  }
  
  .contact-item {
    min-width: auto;
    justify-content: center;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .achievements-tabs {
    flex-wrap: wrap;
  }
  
  .tab-button {
    padding: 10px 16px;
    font-size: 14px;
  }
}
</style>